/**
 * @Description:
 * @Author: CHEHSHUANG
 * @Date: 2019/3/12
 */
import React, {Component} from 'react';
import {connect} from "react-redux";
import HeadBreadcrumb from "../../commons/components/breadcrumb/HeadBreadcrumb";
import {getUserInfo} from "../../commons/utils/CommonUtils";
import "./index.css"
import HomeHead from "./component/HomeHead";
import {listCompleteTask, listFlowTaskWithAllCount, listMyBills,findCommonTaskSumHeader} from "./service";
import {hide, show} from "../../configs/SharedReducer";
import HomeContent from "./component/HomeContent";
import BatchApprove from './component/BatchApprove';
import moment from "moment";

export const TASK_TYPE = {TODO: "todo", COMPLETE: "complete", ORDER: "order"};

class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageInfo: null,
      searchValue: {},
      taskType: TASK_TYPE.TODO,
      selectedRows: [],
      todoDataSource: [],
      completeDataSource: [],
      orderDataSource: [],
      batchApproveShow:false,
      aprroveHead:[]
    }

  }

  componentDidMount() {
    this.getDataSource();
  }

  refresh=()=>{
    this.getDataSource();
  }

  getTaskType = (taskType) => {
    this.setState({taskType}, () => this.getDataSource())
  }
  getDataSource = (params = {}) => {
    this.props.show();
    const {taskType} = this.state;
    if (taskType === TASK_TYPE.ORDER) {
      const initParams = {
        "Q_EQ_ended_Boolean": true,
        "Q_GE_startDate_Date": moment().month(moment().month() - 1),
        "Q_LE_endDate_Date": moment()
      };
      params = {
        ...initParams,
        ...params,
      };
    }
    this.getService(params)
      .then(res => {
        if (res.success) {
          switch (taskType) {
            case TASK_TYPE.TODO:
              this.setState({todoDataSource: res && res.data ? res.data : []});
              break;
            case TASK_TYPE.COMPLETE:
              this.setState({completeDataSource: res && res.data ? res.data : []});
              break;
            case TASK_TYPE.ORDER:
              this.setState({orderDataSource: res && res.data ? res.data : []});
              break;
            default:
              break;
          }
        }
      })
      .finally(() => {
          this.props.hide();
        }
      );
  }

  getService = (params) => {
    const {taskType} = this.state;
    switch (taskType) {
      case TASK_TYPE.TODO:
        return listFlowTaskWithAllCount(params);
      case TASK_TYPE.COMPLETE:
        return listCompleteTask(params);
      case TASK_TYPE.ORDER:
        return listMyBills(params);
      default:
        break;
    }
  }
  handleRowSelectChange = (selectedRows) => {
    this.setState({selectedRows})
  };
  handlePageChange = (pageInfo) => {
    this.setState({pageInfo},()=>this.getDataSource({...this.state.searchValue,pageInfo:pageInfo}));
  }

  handleSearchValue = (searchValue) => {
    this.setState({searchValue:searchValue},()=>this.getDataSource({...searchValue}));
  }

  handleBatchApproce = (batchApproveShow) =>{
    if(batchApproveShow){
      findCommonTaskSumHeader().then(res=>{
        this.setState({batchApproveShow:true,aprroveHead:res})
      })
    }else{
      this.setState({batchApproveShow:false})
    }
    
  }

  render() {
    const user = getUserInfo();
    const {selectedRows, taskType, todoDataSource, completeDataSource, orderDataSource,batchApproveShow} = this.state;
    return (
      <HeadBreadcrumb
        extra={<span className={"head-title"}>{`您好！${ user ? user.userName : ""}，祝您工作愉快！`}</span>}
        className={"todo-page"}
      >
        {batchApproveShow?<BatchApprove aprroveHead={this.state.aprroveHead} handleBatchApproce={this.handleBatchApproce}/>:
        <div className={"tbar-table tbar-table-back"}>
          <HomeHead
            getTaskType={this.getTaskType}
            handleSearchValue={this.handleSearchValue}
            handleBatchApproce={this.handleBatchApproce}
            count={todoDataSource ? todoDataSource.length : 0}
          />
          <HomeContent
            taskType={taskType}
            refresh={this.refresh}
            handleRowSelectChange={this.handleRowSelectChange}
            handlePageChange={this.handlePageChange}
            selectedRows={selectedRows}
            dataSource={{
              [TASK_TYPE.TODO]: todoDataSource,
              [TASK_TYPE.COMPLETE]: completeDataSource,
              [TASK_TYPE.ORDER]: orderDataSource
            }}
          />
        </div>}
      </HeadBreadcrumb>
    );
  }
}

const mapStateToProps = (state) => {
  return {};
};
const mapDispatchToProps = {hide, show};
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
